<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>创建课程 - 析码无界</title>
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css">
    <link rel="stylesheet" href="http://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
    <script src="http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    <style>
        body {
            font-family: 'Microsoft YaHei', sans-serif;
            background-color: #f5f5f5;
        }
        .navbar {
            border-radius: 0;
            background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
            border: none;
        }
        .navbar-brand {
            color: white !important;
            font-weight: bold;
        }
        .main-content {
            margin-top: 20px;
        }
        .panel {
            border: none;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            border-radius: 8px;
        }
        .panel-heading {
            background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
            color: white;
            border-radius: 8px 8px 0 0;
        }
        .btn-primary {
            background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
            border: none;
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand" th:href="@{/teacher}">
                    <i class="fa fa-graduation-cap"></i> 析码无界 - 教师管理平台
                </a>
            </div>
            <ul class="nav navbar-nav">
                <li><a th:href="@{/course/list}"><i class="fa fa-book"></i> 备授课</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="/"><i class="fa fa-sign-out"></i> 退出登录</a></li>
            </ul>
        </div>
    </nav>

    <div class="container main-content">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title"><i class="fa fa-plus"></i> 创建新课程</h3>
            </div>
            <div class="panel-body">
                <div th:if="${error}" class="alert alert-danger" th:text="${error}"></div>
                
                <form th:action="@{/course/create}" method="post" class="form-horizontal">
                    <div class="form-group">
                        <label class="col-sm-2 control-label">课程名称 <span style="color: red;">*</span></label>
                        <div class="col-sm-10">
                            <input type="text" name="courseName" class="form-control" placeholder="请输入课程名称" required>
                        </div>
                    </div>
                    
                    <div class="form-group">
                        <label class="col-sm-2 control-label">学期</label>
                        <div class="col-sm-10">
                            <input type="text" name="semester" class="form-control" placeholder="如：2025年秋">
                        </div>
                    </div>
                    
                    <div class="form-group">
                        <label class="col-sm-2 control-label">课程类型</label>
                        <div class="col-sm-10">
                            <input type="text" name="courseType" class="form-control" placeholder="如：校内公开、教务开课">
                        </div>
                    </div>
                    
                    <div class="form-group">
                        <label class="col-sm-2 control-label">关联班级</label>
                        <div class="col-sm-10">
                            <div style="border: 1px solid #ddd; border-radius: 4px; padding: 10px; max-height: 200px; overflow-y: auto; background: white;">
                                <div th:if="${classes != null and !classes.isEmpty()}">
                                    <div style="margin-bottom: 8px;">
                                        <span class="text-muted"><i class="fa fa-info-circle"></i> 可以选择多个班级</span>
                                    </div>
                                    <div th:each="clazz : ${classes}" style="margin-bottom: 8px;">
                                        <label style="font-weight: normal; cursor: pointer; display: block; padding: 5px; border-radius: 3px;" 
                                               onmouseover="this.style.backgroundColor='#f5f5f5'" 
                                               onmouseout="this.style.backgroundColor='white'">
                                            <input type="checkbox" name="classIds" th:value="${clazz.id}" style="margin-right: 8px;">
                                            <span th:text="${clazz.className}"></span>
                                        </label>
                                    </div>
                                </div>
                                <div th:if="${classes == null or classes.isEmpty()}" class="text-muted">
                                    <i class="fa fa-info-circle"></i> 您还没有创建任何班级，请先创建班级。
                                </div>
                            </div>
                            <small class="text-muted">提示：可以同时选择多个班级，也可以不选择任何班级</small>
                        </div>
                    </div>
                    
                    <div class="form-group">
                        <label class="col-sm-2 control-label">课程描述</label>
                        <div class="col-sm-10">
                            <textarea name="description" class="form-control" rows="4" placeholder="请输入课程描述"></textarea>
                        </div>
                    </div>
                    
                    <div class="form-group">
                        <div class="col-sm-offset-2 col-sm-10">
                            <button type="submit" class="btn btn-primary">
                                <i class="fa fa-save"></i> 创建课程
                            </button>
                            <a th:href="@{/course/list}" class="btn btn-default">
                                <i class="fa fa-arrow-left"></i> 返回列表
                            </a>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</body>
</html>

